<template>
    <div class="common-layout">
        <div>
            <table style=" border: 1px rgb(242,242,242); height: 300px;">
                <thead>
                    <tr style="border: none;">
                        <td colspan="6" style="height: 70px; border: none;">
                            <div style="margin-left:800px;"><el-button type="primary" style="border-radius:10px;">保存</el-button><el-button type="primary" style="border-radius:10px;">打印</el-button></div>
                            <h1 style="font-size: xx-large; margin-bottom: 20px;">老年人健康档案信息卡</h1>
                            <p style="margin-bottom:20px ;">(正面)</p>
                        </td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>姓名</td>
                        <td style="width:200px; height: 50px;">周艳琴</td>
                        <td>性别</td>
                        <td>女</td>
                        <td>出生年月日</td>
                        <td>1997-12-17</td>
                    </tr>
                    <tr>
                        <td colspan="4" style="height: 50px;">健康档案编号</td>
                    </tr>
                    <tr>
                        <td colspan="6" style="height: 80px;">
                            <p>慢性疾病情况：</p>
                            <p style="display:inline-block; width:100px;"><input type="checkbox" value="无">无 </p>
                            <p style="display:inline-block; width:100px;"><input type="checkbox" value="高血压">高血压 </p>
                            <p style="display:inline-block; width:100px;"><input type="checkbox" value="糖尿病">糖尿病 </p>
                            <p style="display:inline-block; width:100px;"><input type="checkbox" value="脑卒中">脑卒中</p>
                            <p style="display:inline-block; width:100px;"><input type="checkbox" value="冠心病">冠心病</p>
                            <p style="display:inline-block; width:100px;"><input type="checkbox" value="哮喘">哮喘</p>
                            <p style="display:inline-block; width:100px;"><input type="checkbox" value="职业病">职业病 </p><br>
                            <div style="margin-left:-380px ;">
                                <p style="display:inline-block; width:100px;"><input type="checkbox" value="其他疾病">其他疾病 </p>
                                <input v-model="bing" style=" border:none; border-bottom: 1px solid; ">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="6" style="height:150px; ">
                            <p style=" margin-left: -900px; margin-top: -60px;"> 过敏史：</p>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div style="margin-top: 600px;">
                <table style=" border: 1px rgb(242,242,242); height: 300px;">
                    <thead>
                        <tr style="border: none;">
                            <td colspan="6" style="height: 70px; border: none;">
                                <p>(反面)</p>
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr style="height: 50px;">
                            <td style="width: 200px;">家庭住址</td>
                            <td></td>
                            <td style="width: 200px;">家庭电话</td>
                            <td></td>
                        </tr>
                        <tr style="height: 50px;">
                            <td style="width: 200px;">紧急联系人情况</td>
                            <td></td>
                            <td style="width: 200px;">联系人电话</td>
                            <td></td>
                        </tr>
                        <tr style="height: 50px;">
                            <td style="width: 200px;">建档机构名称</td>
                            <td></td>
                            <td style="width: 200px;">联系电话</td>
                            <td></td>
                        </tr>
                        <tr style="height: 50px;">
                            <td style="width: 200px;">责任医生护士</td>
                            <td></td>
                            <td style="width: 200px;">联系电话</td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>
    
    
<script lang="ts" setup>
import { Search } from "@element-plus/icons-vue";
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { ElNotification } from "element-plus";
import type { TabsPaneContext } from 'element-plus'

const activeName = ref('first')
const bing = ''
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
const value = ref("")
const labelPosition = ''

const time = [{
    value: '2022-2023', label: '2022-2023'
}, {
    value: '2022-2023', label: '2022-2023'
}, {
    value: '2022-2023', label: '2022-2023'
},]

</script>
    
    
<style scoped>
.common-layout {
    width: 1200px;
    height: 1000px;
}

table {
    text-align: center;
    margin-top: -600px;
    width: 1000px;
    height: 600px;
}

.header {
    width: 1000px;
    height: 300px;
    background-color: aliceblue;

}

.el-menu-demo {
    width: 1150px;
}

.el-menu-item {
    width: 150px;
}

td {
    border: 1px solid rgb(242, 242, 242);
}

.one {
    width: 800px;
    height: 100px;
}

img {
    width: 100px;
    height: 100px;
}

span {
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 20px;
}

.img {
    float: left;
    border-radius: 10px;
}

.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.i {
    width: 70px;
    height: 70px;
}</style>